import Taro, { useState } from "@tarojs/taro";
import { Button, View } from "@tarojs/components";
import "./index.scss";
import { AtModal, AtModalContent, AtModalHeader } from "taro-ui";

export interface IAuthPhoneAvatar {
  reLaunchPath: string;
}

export const AuthPhoneAvatar = (props: IAuthPhoneAvatar) => {
  const { reLaunchPath } = props;

  const userInfo = Taro.getStorageSync("userInfo");

  const isLogin = userInfo && userInfo.id > 0 ? true : false

  const [open, setOpen] = useState(!isLogin);

  const getPhoneNumberCallback = () => {
    setOpen(false)
    Taro.reLaunch({
      url: reLaunchPath
    });
    return;

  };

  return (
    <View className="auth-container">
      <AtModal isOpened={open} closeOnClickOverlay={false}>
        <AtModalHeader>
          <View className="title">未授权登录，无法投票</View>
        </AtModalHeader>
        <AtModalContent>
          <View className="auth-content">
            <Button
              className={`auth-btn ${isLogin ? "disabled" : ""}`}
              // openType="getPhoneNumber"
              disabled={isLogin}
              onClick={getPhoneNumberCallback}
            >
              授权登录
            </Button>
          </View>
        </AtModalContent>
      </AtModal>
    </View>
  );
};
